<template>
<div class="">
    <p>
        <span class="tit1">各级养老服务设施数量月度环比和同比增长率统计</span>
    </p>
    <div ref="chart3" class='top20' style="width: 100%; height: 300px" />
</div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
    components: {},
    props: {},
    data() {
        return {
            chartData: {
                data1: ['月环比增长', '月同比增长'],
                data2: ['一级服务设施','二级服务设施','三级服务设施','四级服务设施', '五级服务设施'],
                data3: [99, 66, 77, 44, 44, 33, 23],
                data4: [66, 82, 91, 66, 66, 66, 98],
            }
        }
    },
    computed: {},
    watch: {

    },
    created() {
        const t = this;

    },
    mounted() {
        const t = this;
        t.initChart();
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.chart3, 'macarons')
            this.setOptions()
        },
        setOptions() {
            const t = this;
            this.chart.setOption({
                color: ['#FFAE38','#6395FF'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: t.chartData.data1
                },
                grid: {
                    left: '3%',
                    right: '10%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: t.chartData.data2
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                        name: t.chartData.data1[0],
                        type: 'line',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                                {offset: 0,color: 'rgba(255, 174, 56, 0.5)'},
                                {offset: 1,color: 'rgba(255, 255, 255, 0)'},
                            ])
                        },
                        data: t.chartData.data3
                    },
                    {
                        name: t.chartData.data1[1],
                        type: 'line',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                                {offset: 0,color: 'rgba(99, 149, 255, 1)'},
                                {offset: 1,color: 'rgba(255, 255, 255, 0)'},
                            ])
                        },
                        data: t.chartData.data4
                    }
                ]
            })
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
